<template>
  <!-- 搜索栏部分 -->
  <el-card class="search-card" >
    <el-form :model="searchForm" label-width="90px" inline>
      <el-form-item label="工作站编码" >
        <el-input v-model="searchForm.code" placeholder="工作站编码" clearable />
      </el-form-item>
      <el-form-item label="所属车间">
        <el-select v-model="searchForm.workshopId" placeholder="所在车间" clearable style="width: 100px;">
          <el-option
            v-for="workshop in workshopList"
            :value="workshop.id"
            :label="workshop.name"
            :key="workshop.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="所属工序">
        <el-select v-model="searchForm.processId" placeholder="所属工序"  style="width: 100px;" >
          <el-option
            v-for="process in processList"
            :value="process.id"
            :label="process.processName"
            :key="process.id"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 列表 -->
  <el-card class="table-card">
    <el-radio-group v-model="workstationCode" style="width: 100%">
      <el-table
          :data="workstationList"
          border
          stripe

      >
        <el-table-column>
          <template #default="scope">
            <el-radio :value="scope.row.code"/>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="工作站编号" />
        <el-table-column prop="name" label="工作站名称" />
        <el-table-column prop="location" label="工作站位置" />
        <el-table-column prop="workshop.name" label="所在车间" />
        <el-table-column prop="process.processName" label="所属工序" />
        <el-table-column prop="description" label="备注" />
      </el-table>
    </el-radio-group>
  </el-card>
  <el-row style="margin: 40px">
    <el-button @click="doSelectWorkstation">确定</el-button>
  </el-row>
</template>

<script setup>
//导入
import {ref,onMounted} from "vue";
import {getWorkshopPage} from "@/api/workshop.js"
import {getProcessList} from "@/api/process.js"
import {getWorkstationList} from "@/api/my-workstation.js"
import {ElMessage} from "element-plus";

//--------------属性申明  ⬇
const workstationList = ref([])

const searchForm = ref({
  code:"",
  workshopId:"",
  processId:""
})
//工序数据
const processList = ref([])
//车间数据
const workshopList = ref([])

const workstationCode = ref(-1)
//申明事件
const emit = defineEmits(["selectWorkstation"])
//--------------属性申明  ⬆
//--------------函数申明  ⬇
//加载车间列表
const loadWorkshopList = ()=>{
  getWorkshopPage(1,1000, {}).then(res=>{
    workshopList.value = res.data.records
      })
}
//加载工序列表
const loadProcessList = ()=>{
  let params ={}
  params.pageNum =1
  params.size = 1000
  getProcessList(params).then(res=>{
    processList.value = res.data.list
  })
}
//查询工作站
const handleSearch = ()=>{
  getWorkstationList(searchForm.value).then(res=>{
    workstationList.value = res.data
  })
}
const doSelectWorkstation = ()=>{
  if (workstationCode.value === -1){
    ElMessage.error("请选择工作站")
  }else {
    emit("selectWorkstation",workstationCode.value)
  }
 resetSearch()
}
//重置查询列表
const resetSearch = ()=>{
  workstationCode.value = -1;
  searchForm.value = {
    code:"",
    workshopId:"",
    processId:""
  }
}
onMounted( ()=>{
  resetSearch();
  handleSearch();
  loadWorkshopList()
  loadProcessList()
})
//--------------函数申明  ⬆
</script>

<style scoped>

</style>